<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>登录</title>
  <!-- Tell the browser to be responsive to screen width -->
  <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
  <!-- Bootstrap 3.3.6 -->
  <link rel="stylesheet" href="${httpsurl}bootstrap/css/bootstrap.min.css">
  <!-- Font Awesome -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css">
  <!-- Ionicons -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.min.css">
  <!-- Theme style -->
  <link rel="stylesheet" href="${httpsurl}dist/css/AdminLTE.min.css">
  <!-- iCheck -->
  <link rel="stylesheet" href="${httpsurl}plugins/iCheck/square/blue.css">

  <link rel="stylesheet" href="${httpsurl}plugins/sweetalert/sweetalert.css">


  <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
  <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
  <!--[if lt IE 9]>
  <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
  <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
  <![endif]-->

  <style>
    .inp {
      border: 1px solid #cccccc;
      border-radius: 2px;
      padding: 0 10px;
      width: 278px;
      height: 40px;
      font-size: 18px;
    }



    #captcha {
      width: 300px;
      display: inline-block;
    }

    #text {
      height: 42px;
      width: 298px;
      text-align: center;
      border-radius: 2px;
      background-color: #F3F3F3;
      color: #BBBBBB;
      font-size: 14px;
      letter-spacing: 0.1px;
      line-height: 42px;
    }

    #wait {
      display: none;
      height: 42px;
      width: 298px;
      text-align: center;
      border-radius: 2px;
      background-color: #F3F3F3;
    }

    .loading {
      margin: auto;
      width: 70px;
      height: 20px;
    }

    .loading-dot {
      float: left;
      width: 8px;
      height: 8px;
      margin: 18px 4px;
      background: #ccc;

      -webkit-border-radius: 50%;
      -moz-border-radius: 50%;
      border-radius: 50%;

      opacity: 0;

      -webkit-box-shadow: 0 0 2px black;
      -moz-box-shadow: 0 0 2px black;
      -ms-box-shadow: 0 0 2px black;
      -o-box-shadow: 0 0 2px black;
      box-shadow: 0 0 2px black;

      -webkit-animation: loadingFade 1s infinite;
      -moz-animation: loadingFade 1s infinite;
      animation: loadingFade 1s infinite;
    }

    .loading-dot:nth-child(1) {
      -webkit-animation-delay: 0s;
      -moz-animation-delay: 0s;
      animation-delay: 0s;
    }

    .loading-dot:nth-child(2) {
      -webkit-animation-delay: 0.1s;
      -moz-animation-delay: 0.1s;
      animation-delay: 0.1s;
    }

    .loading-dot:nth-child(3) {
      -webkit-animation-delay: 0.2s;
      -moz-animation-delay: 0.2s;
      animation-delay: 0.2s;
    }

    .loading-dot:nth-child(4) {
      -webkit-animation-delay: 0.3s;
      -moz-animation-delay: 0.3s;
      animation-delay: 0.3s;
    }

    @-webkit-keyframes loadingFade {
      0% { opacity: 0; }
      50% { opacity: 0.8; }
      100% { opacity: 0; }
    }

    @-moz-keyframes loadingFade {
      0% { opacity: 0; }
      50% { opacity: 0.8; }
      100% { opacity: 0; }
    }

    @keyframes loadingFade {
      0% { opacity: 0; }
      50% { opacity: 0.8; }
      100% { opacity: 0; }
    }

  </style>
</head>

<body class="hold-transition login-page">
  <div class="login-box">
    <div class="login-logo">
      <a href="#"><b>${sitename!''}</b>系统</a>
    </div>
    <!-- /.login-logo -->
    <div class="login-box-body">
      <p class="login-box-msg">登录系统</p>

      <form action="${siteurl}login.htm" method="post" id="form">
        <div class="form-group has-feedback">
          <input type="text" class="form-control" name="username" placeholder="用户名">
          <span class="glyphicon glyphicon-envelope form-control-feedback"></span>
        </div>
        <div class="form-group has-feedback">
          <input type="password" class="form-control" name="password" placeholder="密码">
          <span class="glyphicon glyphicon-lock form-control-feedback"></span>
        </div>
        <div class="form-group has-feedback">
          <label>完成验证：</label>
          <div id="captcha">
            <div id="text">
              行为验证™ 安全组件加载中
            </div>
            <div id="wait" class="show">
              <div class="loading">
                <div class="loading-dot"></div>
                <div class="loading-dot"></div>
                <div class="loading-dot"></div>
                <div class="loading-dot"></div>
              </div>
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col-xs-8">
            <div class="checkbox icheck">
              <label>
                <input type="checkbox"> 记住我
              </label>
            </div>
          </div>
          <!-- /.col -->
          <div class="col-xs-4">
            <button id="btn" type="button" class="btn btn-primary btn-block btn-flat">登录</button>
          </div>
          <!-- /.col -->
        </div>
      </form>

      <div class="social-auth-links text-center">
        [#if oauths??]
        [#list oauths as item]
        <a href="${(item.url)!}" class="btn btn-block btn-social  ${(item.bg)!''}">
          <i class="fa ${(item.icon)!''}"></i>通过${(item.name)!""}登陆
        </a>
        [/#list]
        [/#if]
      </div>
      <!-- /.social-auth-links -->

      <a href="#">忘记密码</a><br>
      <a href="${httpsurl}register.htm" class="text-center">注册一个账号</a>

    </div>
    <!-- /.login-box-body -->
  </div>
  <!-- /.login-box -->

  <!-- jQuery 2.2.3 -->
  <script src="${httpsurl}plugins/jQuery/jquery-2.2.3.min.js"></script>
  <!-- Bootstrap 3.3.6 -->
  <script src="${httpsurl}bootstrap/js/bootstrap.min.js"></script>
  <!-- iCheck -->
  <script src="${httpsurl}plugins/iCheck/icheck.min.js"></script>
  <script src="${httpsurl}plugins/sweetalert/sweetalert.min.js"></script>
  <script src="${httpsurl}dist/js/gt.js"></script>

  <script>
    $(function () {
      $('input').iCheck({
        checkboxClass: 'icheckbox_square-blue',
        radioClass: 'iradio_square-blue',
        increaseArea: '20%' // optional
      });
    });




    var handler = function (captchaObj) {
      captchaObj.appendTo('#captcha');
      captchaObj.onReady(function () {
        $("#wait").hide();
        $("#text").hide();
        $("#wait").removeClass("show");
      });

      $('#btn').click(function () {
        var result = captchaObj.getValidate();
        if (!result) {
          return alert('请完成验证');
        }
        $("#form").submit();
      })
      // 更多前端接口说明请参见：http://docs.geetest.com/install/client/web-front/
    };
    $.ajax({
      url: "${siteurl}startcaptcha.htm?t=" + (new Date()).getTime(),
      type: "get",
      dataType: "json",
      success: function (data) {
        //请检测data的数据结构， 保证data.gt, data.challenge, data.success有值
        initGeetest({
          // 以下配置参数来自服务端 SDK
          gt: data.gt,
          challenge: data.challenge,
          offline: !data.success,
          new_captcha: true
        }, handler)
      }
    })
    [#if msg?? ]
    swal("Oops!", "${msg}", "error")
    [/#if]

  </script>


</body>

</html>